// 药师审方

<template>
<div class="trial">
    <h3 class="title">
      <span >待复合 ({{ prelist.length }})</span>
      <hr />
    </h3>
    <template v-if="prelist && prelist.length < 4">
      <div class="wrap" v-for="(item,i) in prelist" :key="i">
        <div class="user">{{ item.patient_name }}</div>
        <div class="date">
          开方时间:
          <span>{{ item.add_time }}</span>
        </div>
        <button @click="changeState(item)">查看</button>
      </div>
    </template>
    <template v-if="prelist && prelist.length >= 4">
      <div class="wrap" v-for="(item,i) in currentUpdateList" :key="i">
        <div class="user">{{ item.patient_name }}</div>
        <div class="date">
          开方时间:
          <span>{{ item.add_time }}</span>
        </div>
        <button @click="changeState(item)">查看</button>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="prelist.length"
          :page-size="3"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
// 获取待审核的处方列表
import { getDoctorAuditList } from "@/request/personnel";

export default {
  data() {
    return {
      prelist: "",
      currentUpdateList: []
    };
  },
  created() {
    getDoctorAuditList({
      token: this.$token
    }).then(res => { 
      if(res.code == 10001) return false;
      this.prelist = res.data.data;
      this.currentUpdateList = this.prelist.slice(0, 3);
    });
  },
  methods: {
    changeState(item) {
      this.$emit("changeState", 1, item.p_code);
    },
    handleCurrentChange(val) {
      // val 表示当前页
      this.currentUpdateList = this.prelist.slice((val - 1) * 3, (val - 1) * 3 + 3);
    }
  }
};
</script>

<style lang="less" scoped>
.trial {
  width: 1200px;
  height: 600px;
  margin: 0 auto 100px;
  position: relative;
}
.trial .title {
  font-size: 22px;
  font-weight: 400;
  margin-top: 50px;
}
hr {
  border: none;
  width: 1060px;
  height: 1px;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 5px;
  background: rgba(234, 234, 234, 1);
}

.trial .wrap {
  width: 1200px;
  height: 143px;
  font-size: 14px;
  margin-top: 30px;
  padding-bottom: 14px;
  background: #fbfbfb;
  border: 1px solid #f5f5f5;
  position: relative;
  button {
    position: absolute;
    width: 80px;
    height: 28px;
    border-radius: 8px;
    right: 30px;
    top: 60px;
    cursor: pointer;
  }
  .user {
    margin-top: 35px;
    margin-left: 25px;
  }
  .date {
    margin-top: 25px;
    margin-left: 25px;
  }
}
.trial .wrap div {
  margin-top: 8px;
  color: #656565;
}
.trial .wrap div.user {
  color: #71c0d6;
  font-size: 20px;
  margin-bottom: 10px;
}
.pagination /deep/ {
  .el-pagination {
    position: absolute;
    bottom: -10px;
    width: 100%;
    text-align: center;
  }
}
</style>